<template>
    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
      <el-radio-button :value="false">expand</el-radio-button>
      <el-radio-button :value="true">collapse</el-radio-button>
    </el-radio-group>
    <div class="admin-pages">
        <el-container class="layout-container-demo" style="height: 800px">
        <el-aside width="200px">
        <el-scrollbar >
      <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleSelect" :collapse="isCollapse">
        <el-sub-menu v-for="item in menuItems" :index="item.index" :key="item.index">
            
            <template #title>
           
                <!-- <el-icon :class="item.iconClass"><{{item.iconClass}} /></el-icon> -->
             <span>  {{ item.label }}</span>
        </template>
          <template v-if="item.children">
            <el-menu-item v-for="child in item.children" :index="child.index" :key="child.index">
            <el-icon :class="item.iconClass"><Setting /></el-icon>
              {{ child.label }}
            </el-menu-item>
          </template>
        </el-sub-menu>
        
      </el-menu>
    </el-scrollbar>
    
</el-aside>
</el-container>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue';
  import { ElMenu, ElIcon  } from 'element-plus';
  import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,HelpFilled,
  } from '@element-plus/icons-vue'
  
  const isCollapse = ref(true);
  const activeIndex = ref('1');
  
  
  const menuItems = ref([
  { 
    index: '1', 
    label: '用户管理',
    iconClass: 'el-icon-user',
    children: [
      { index: '1-1', label: '用户列表', iconClass: 'el-icon-list' },
      { index: '1-2', label: '用户添加', iconClass: 'el-icon-plus' }
    ]
  },
  { 
    index: '2', 
    label: '订单管理',
    iconClass: 'el-icon-order',
    children: [
      { index: '2-1', label: '订单列表', iconClass: 'el-icon-document' },
      { index: '2-2', label: '订单详情', iconClass: 'el-icon-info' }
    ]
  },
  { 
    index: '3', 
    label: '商品管理',
    iconClass: 'el-icon-goods',
    children: [
      { index: '3-1', label: '商品列表', iconClass: 'el-icon-goods-list' },
      { index: '3-2', label: '商品添加', iconClass: 'el-icon-plus-square' }
    ]
  },
]);
  
  const handleSelect = (index: string) => {
    activeIndex.value = index;
  };
  </script>
  
  <style scoped>
  .admin-page {
    width: 200px;
  }
  </style>